<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>模型详情 - 转炉终点预测系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="styles/unified.css">
    <link rel="stylesheet" href="styles/components.css">
    <link rel="stylesheet" href="styles/sidebar-theme.css">
    <link rel="stylesheet" href="styles/model-pages.css">
    <link rel="stylesheet" href="styles/scale-fix.css">
    <link rel="stylesheet" href="styles/modal-dialog.css">
    <style>
        /* 页面特定样式 */
        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 30px;
        }
        
        .metric-card {
            background-color: var(--card-bg);
            border-radius: var(--border-radius);
            padding: 15px;
            box-shadow: var(--card-shadow);
        }
        
        .metric-title {
            color: var(--text-secondary);
            font-size: 14px;
            margin-bottom: 10px;
        }
        
        .metric-value {
            font-size: 24px;
            font-weight: 600;
            color: var(--primary);
        }
        
        .metric-unit {
            font-size: 12px;
            color: var(--text-secondary);
            margin-left: 5px;
        }
        
        .model-description {
            background-color: var(--card-bg);
            border-radius: var(--border-radius);
            padding: 20px;
            margin-bottom: 30px;
            box-shadow: var(--card-shadow);
        }
        
        .model-description h3 {
            margin-bottom: 15px;
            font-size: 18px;
            color: var(--text-primary);
            font-weight: 500;
        }
        
        .model-description p {
            margin-bottom: 15px;
            line-height: 1.6;
            color: var(--text-primary);
        }
        
        .model-stats {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            margin-top: 20px;
        }
        
        .stat-group {
            flex: 1;
            min-width: 200px;
        }
        
        .stat-title {
            font-weight: 500;
            margin-bottom: 10px;
            color: var(--text-primary);
        }
        
        .stat-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .stat-table td {
            padding: 8px 0;
            border-bottom: 1px solid var(--border-color);
        }
        
        .stat-table td:first-child {
            color: var(--text-secondary);
        }
        
        .stat-table td:last-child {
            text-align: right;
            font-weight: 500;
        }
        
        .variables-section, .prediction-section {
            margin-bottom: 30px;
        }
        
        .variables-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 15px;
        }
        
        .variable-card {
            background-color: var(--card-bg);
            border-radius: var(--border-radius);
            padding: 15px;
            box-shadow: var(--card-shadow);
        }
        
        .variable-name {
            font-weight: 500;
            margin-bottom: 5px;
            color: var(--text-primary);
        }
        
        .variable-details {
            color: var(--text-secondary);
            font-size: 14px;
        }
        
        .variable-importance {
            margin-top: 10px;
            height: 8px;
            background-color: var(--border-color);
            border-radius: 4px;
            overflow: hidden;
        }
        
        .importance-bar {
            height: 100%;
            background-color: var(--primary);
        }
        
        .timeline {
            margin-top: 30px;
            position: relative;
            padding-left: 20px;
        }
        
        .timeline::before {
            content: '';
            position: absolute;
            left: 0;
            top: 10px;
            bottom: 10px;
            width: 2px;
            background-color: var(--border-color);
        }
        
        .timeline-item {
            position: relative;
            margin-bottom: 20px;
            padding-left: 20px;
        }
        
        .timeline-item::before {
            content: '';
            position: absolute;
            left: -5px;
            top: 5px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: var(--primary);
        }
        
        .timeline-date {
            font-size: 14px;
            color: var(--text-secondary);
            margin-bottom: 5px;
        }
        
        .timeline-title {
            font-weight: 500;
            margin-bottom: 5px;
            color: var(--text-primary);
        }
        
        .timeline-description {
            font-size: 14px;
            color: var(--text-secondary);
        }
        
        .prediction-example {
            background-color: var(--card-bg);
            border-radius: var(--border-radius);
            padding: 20px;
            box-shadow: var(--card-shadow);
        }
        
        .prediction-inputs {
            margin-bottom: 20px;
        }
        
        .input-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 15px;
        }
        
        .input-item {
            background-color: rgba(0, 0, 0, 0.03);
            padding: 10px;
            border-radius: var(--border-radius);
        }
        
        .input-label {
            font-size: 12px;
            color: var(--text-secondary);
            margin-bottom: 5px;
        }
        
        .input-value {
            font-weight: 500;
            color: var(--text-primary);
        }
        
        .prediction-results {
            background-color: rgba(0, 123, 255, 0.05);
            padding: 15px;
            border-radius: var(--border-radius);
            border-left: 3px solid var(--primary);
        }
        
        .prediction-title {
            font-weight: 500;
            margin-bottom: 10px;
            color: var(--text-primary);
        }
        
        .prediction-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 15px;
        }
        
        .prediction-item {
            background-color: white;
            padding: 10px;
            border-radius: var(--border-radius);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .prediction-label {
            font-size: 12px;
            color: var(--text-secondary);
            margin-bottom: 5px;
        }
        
        .prediction-value {
            font-weight: 600;
            color: var(--primary);
        }
    </style>
</head>
<body>
    <!-- 侧边栏 -->
    <div class="sidebar">
        <div class="sidebar-header">
            <div class="sidebar-logo">
                <i class="fas fa-industry"></i>
            </div>
            <div class="sidebar-title">转炉终点预测系统</div>
        </div>
        <div class="sidebar-menu">
            <div class="sidebar-menu-title">主导航</div>
            <ul>
                <li><a href="index.html"><i class="fas fa-home"></i>首页</a></li>
                
                <li><a href="production-monitor.html"><i class="fas fa-chart-line"></i>生产监控</a></li>
                <li><a href="history-data.html"><i class="fas fa-history"></i>历史数据</a></li>
                <li><a href="quality-analysis.html"><i class="fas fa-flask"></i>质量分析</a></li>
            </ul>
            
            <div class="sidebar-menu-title">模型管理</div>
            <ul>
                <li><a href="model-details.html" class="active"><i class="fas fa-brain"></i>模型详情</a></li>
                <li><a href="model-config.html"><i class="fas fa-cogs"></i>模型配置</a></li>
                <li><a href="model-performance.html"><i class="fas fa-chart-bar"></i>模型性能</a></li>
                <li><a href="model-update.html"><i class="fas fa-sync-alt"></i>模型更新</a></li>
            </ul>
            
            <div class="sidebar-menu-title">系统设置</div>
            <ul>
                <li><a href="system-settings.html"><i class="fas fa-cog"></i>系统设置</a></li>
                <li><a href="online-analysis.html"><i class="fas fa-chart-bar"></i>在线分析</a></li>
            </ul>
        </div>
        <div class="sidebar-footer">
            <i class="fas fa-info-circle"></i>
            <span>系统版本：v2.5.3</span>
        </div>
    </div>

    <!-- 侧边栏遮罩层 -->
    <div class="sidebar-overlay"></div>

    <div class="container">
        <div class="header">
            <div class="header-left">
                <div>
                    <div class="title">模型详情</div>
                    <div class="subtitle">深度学习模型架构与参数说明</div>
                </div>
            </div>
            <div class="header-right">
                <div class="header-icon">
                    <i class="fas fa-search"></i>
                </div>
                <div class="header-icon">
                    <i class="fas fa-bell"></i>
                    <span class="notification-badge">3</span>
                </div>
                <div class="dropdown">
                    <div class="user-dropdown dropdown-trigger">
                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="用户头像" class="user-avatar">
                        <span class="user-name">工程师</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="dropdown-menu">
                        <a href="#" class="dropdown-item">
                            <i class="fas fa-user"></i>
                            <span>个人资料</span>
                        </a>
                        <a href="#" class="dropdown-item">
                            <i class="fas fa-cog"></i>
                            <span>账号设置</span>
                        </a>
                        <a href="#" class="dropdown-item">
                            <i class="fas fa-question-circle"></i>
                            <span>帮助中心</span>
                        </a>
                        <a href="#" class="dropdown-item">
                            <i class="fas fa-sign-out-alt"></i>
                            <span>退出登录</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="content-wrapper">
            <!-- 模型详情内容 -->
            <div class="section-title">模型架构</div>
            <div class="card">
                <div class="card-header">
                    <div class="card-title">
                        <i class="fas fa-project-diagram"></i>
                        LSTM-GRU混合神经网络
                    </div>
                    <div class="header-actions">
                        <button class="btn btn-sm btn-secondary">
                            <i class="fas fa-download"></i>
                            导出架构图
                        </button>
                    </div>
                </div>
                <div class="card-content">
                    <div class="model-architecture">
                        <div class="model-placeholder">
                            <i class="fas fa-project-diagram"></i>
                            <p>模型架构图</p>
                        </div>
                        <div class="model-description">
                            <p>本系统采用LSTM-GRU混合神经网络架构，结合转炉冶炼专家知识进行设计，主要包括以下组件：</p>
                            <ul>
                                <li>数据预处理层：对原始冶炼数据进行清洗、标准化和缺失值处理</li>
                                <li>LSTM层：捕捉长期时序依赖关系，优化长时间段内的信息记忆</li>
                                <li>GRU层：提高模型对短期突变信号的响应能力</li>
                                <li>注意力机制：自适应加权不同时间点的特征重要性</li>
                                <li>全连接层：综合特征进行最终预测</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 模型参数 -->
            <div class="section-title">模型参数</div>
            <div class="card">
                <div class="card-header">
                    <div class="card-title">
                        <i class="fas fa-sliders-h"></i>
                        关键参数配置
                    </div>
                    <div class="header-actions">
                        <button class="btn btn-sm btn-primary">
                            <i class="fas fa-edit"></i>
                            编辑参数
                        </button>
                    </div>
                </div>
                <div class="card-content">
                    <div class="params-table-wrapper">
                        <table>
                            <thead>
                                <tr>
                                    <th>参数名称</th>
                                    <th>当前值</th>
                                    <th>说明</th>
                                    <th>最后修改</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>LSTM层数</td>
                                    <td>3</td>
                                    <td>长期记忆层数量，影响模型捕捉长时间依赖关系的能力</td>
                                    <td>2023-11-15</td>
                                </tr>
                                <tr>
                                    <td>GRU层数</td>
                                    <td>2</td>
                                    <td>门控循环单元层数量，影响模型对短期变化的敏感度</td>
                                    <td>2023-11-15</td>
                                </tr>
                                <tr>
                                    <td>隐藏层单元数</td>
                                    <td>128</td>
                                    <td>每层循环神经网络的隐藏单元数量，影响模型复杂度</td>
                                    <td>2023-11-15</td>
                                </tr>
                                <tr>
                                    <td>学习率</td>
                                    <td>0.001</td>
                                    <td>模型训练时的学习速率，影响收敛速度和稳定性</td>
                                    <td>2023-11-20</td>
                                </tr>
                                <tr>
                                    <td>批量大小</td>
                                    <td>64</td>
                                    <td>每次训练的样本数量，影响训练速度和内存占用</td>
                                    <td>2023-11-15</td>
                                </tr>
                                <tr>
                                    <td>Dropout率</td>
                                    <td>0.3</td>
                                    <td>防止过拟合的随机失活比例</td>
                                    <td>2023-11-20</td>
                                </tr>
                                <tr>
                                    <td>时间步长</td>
                                    <td>120</td>
                                    <td>模型接收的历史时间序列长度</td>
                                    <td>2023-11-15</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            
            <!-- 特征重要性 -->
            <div class="section-title">特征重要性</div>
            <div class="card">
                <div class="card-header">
                    <div class="card-title">
                        <i class="fas fa-chart-bar"></i>
                        输入特征影响度
                    </div>
                    <div class="header-actions">
                        <select class="form-control form-control-sm">
                            <option>温度预测</option>
                            <option>碳含量预测</option>
                            <option>时间预测</option>
                        </select>
                    </div>
                </div>
                <div class="card-content">
                    <div class="features-importance">
                        <div class="feature-item">
                            <div class="feature-name">氧气流量</div>
                            <div class="feature-bar-container">
                                <div class="feature-bar" style="width: 85%"></div>
                            </div>
                            <div class="feature-value">0.85</div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-name">初始温度</div>
                            <div class="feature-bar-container">
                                <div class="feature-bar" style="width: 78%"></div>
                            </div>
                            <div class="feature-value">0.78</div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-name">初始碳含量</div>
                            <div class="feature-bar-container">
                                <div class="feature-bar" style="width: 73%"></div>
                            </div>
                            <div class="feature-value">0.73</div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-name">吹氧时长</div>
                            <div class="feature-bar-container">
                                <div class="feature-bar" style="width: 68%"></div>
                            </div>
                            <div class="feature-value">0.68</div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-name">炉衬厚度</div>
                            <div class="feature-bar-container">
                                <div class="feature-bar" style="width: 62%"></div>
                            </div>
                            <div class="feature-value">0.62</div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-name">炉底搅拌强度</div>
                            <div class="feature-bar-container">
                                <div class="feature-bar" style="width: 58%"></div>
                            </div>
                            <div class="feature-value">0.58</div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-name">顶吹角度</div>
                            <div class="feature-bar-container">
                                <div class="feature-bar" style="width: 52%"></div>
                            </div>
                            <div class="feature-value">0.52</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript引用 -->
    <script src="scripts/unified.js"></script>
    <script src="scripts/modal-dialog.js"></script>
    <script src="scripts/add-modal-to-pages.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化下拉菜单
            initDropdowns();
            
            // 导出架构图按钮点击事件
            const exportButton = document.querySelector('.btn-secondary');
            if (exportButton) {
                exportButton.addEventListener('click', function() {
                    showMessage('正在准备导出模型架构图...', 'info');
                    
                    // 模拟下载延迟
                    setTimeout(() => {
                        showMessage('模型架构图已导出到您的下载文件夹', 'success');
                    }, 1500);
                });
            }
            
            // 编辑参数按钮点击事件
            const editButton = document.querySelector('.btn-primary');
            if (editButton) {
                editButton.addEventListener('click', function() {
                    showMessage('正在打开参数编辑界面...', 'info');
                    
                    // 模拟加载编辑界面
                    setTimeout(() => {
                        // 显示参数编辑对话框
                        showFormDialog('编辑模型参数', `
                            <div class="form-group">
                                <label>LSTM层数</label>
                                <input type="number" name="lstm_layers" value="3" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>GRU层数</label>
                                <input type="number" name="gru_layers" value="2" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>隐藏层单元数</label>
                                <input type="number" name="hidden_units" value="128" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>学习率</label>
                                <input type="number" name="learning_rate" value="0.001" step="0.0001" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>批量大小</label>
                                <input type="number" name="batch_size" value="64" class="form-control">
                            </div>
                        `, function(data) {
                            showMessage('参数已更新', 'success');
                        });
                    }, 1000);
                });
            }
            
            // 为表格行添加点击事件
            const tableRows = document.querySelectorAll('tbody tr');
            tableRows.forEach(row => {
                row.addEventListener('click', function() {
                    const paramName = this.querySelector('td:first-child').textContent;
                    const paramValue = this.querySelector('td:nth-child(2)').textContent;
                    
                    showFormDialog(`编辑参数: ${paramName}`, `
                        <div class="form-group">
                            <label>${paramName}</label>
                            <input type="text" name="param_value" value="${paramValue}" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>参数说明</label>
                            <textarea class="form-control" rows="3">${this.querySelector('td:nth-child(3)').textContent}</textarea>
                        </div>
                    `, function(data) {
                        showMessage(`参数 "${paramName}" 已更新为 ${data.param_value}`, 'success');
                    });
                });
            });
            
            // 为模型架构图区域添加点击事件
            const modelPlaceholder = document.querySelector('.model-placeholder');
            if (modelPlaceholder) {
                modelPlaceholder.addEventListener('click', function() {
                    showMessage('正在加载高清模型架构图...', 'info');
                    
                    // 模拟加载大图
                    setTimeout(() => {
                        showDetailDialog('模型架构详细视图', `
                            <div style="text-align: center;">
                                <i class="fas fa-project-diagram" style="font-size: 100px; color: var(--primary); margin: 30px 0;"></i>
                                <h3>LSTM-GRU混合神经网络架构</h3>
                                <p style="margin-top: 20px; color: #666;">高清架构图正在开发中，敬请期待</p>
                            </div>
                        `, 'large');
                    }, 1000);
                });
            }
            
            // 为特征重要性条添加点击事件（如果存在）
            const featureItems = document.querySelectorAll('.feature-item');
            featureItems.forEach(item => {
                item.addEventListener('click', function() {
                    const featureName = this.querySelector('.feature-name').textContent;
                    const featureValue = this.querySelector('.feature-value').textContent;
                    
                    showDetailDialog(`"${featureName}"特征分析`, `
                        <div class="feature-detail">
                            <div class="feature-score">
                                <div class="score-label">重要性得分</div>
                                <div class="score-value">${featureValue}</div>
                            </div>
                            <div class="feature-chart" style="height: 250px; background-color: rgba(0,0,0,0.02); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin: 20px 0;">
                                <div style="text-align: center;">
                                    <i class="fas fa-chart-line" style="font-size: 48px; color: #aaa; margin-bottom: 15px;"></i>
                                    <p>${featureName}影响因子详细分析图表</p>
                                </div>
                            </div>
                            <div class="feature-description">
                                <h4>特征说明</h4>
                                <p>${featureName}是影响转炉终点预测的关键因素之一，在不同工况下表现出不同的重要性。在高温区域，该特征的影响更为显著，而在低温区域影响相对较小。</p>
                                <h4>应用建议</h4>
                                <p>建议在模型训练过程中增加该特征的权重，并优化相关传感器的精度和采样频率，可有效提升预测准确率。</p>
                            </div>
                        </div>
                        <style>
                            .feature-detail {
                                display: flex;
                                flex-direction: column;
                                gap: 15px;
                            }
                            .feature-score {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                gap: 15px;
                                padding: 15px;
                                background-color: rgba(0,0,0,0.02);
                                border-radius: 8px;
                            }
                            .score-label {
                                font-weight: 500;
                                color: #555;
                            }
                            .score-value {
                                font-size: 24px;
                                font-weight: 700;
                                color: var(--primary);
                            }
                            .feature-description h4 {
                                margin-top: 15px;
                                margin-bottom: 10px;
                                color: var(--primary-dark);
                            }
                            .feature-description p {
                                margin-bottom: 15px;
                                line-height: 1.6;
                            }
                        </style>
                    `, 'large');
                });
            });
            
            // 变量卡片点击显示详情
            const variableCards = document.querySelectorAll('.variable-card');
            
            variableCards.forEach(card => {
                card.addEventListener('click', function() {
                    const varName = this.querySelector('.variable-name').textContent;
                    const importanceValue = this.querySelector('.importance-bar').style.width;
                    
                    showDetailDialog(`变量详情: ${varName}`, `
                        <div class="variable-detail-container">
                            <div class="detail-header">
                                <h3>${varName}</h3>
                                <div class="variable-type">工艺参数</div>
                            </div>
                            
                            <div class="detail-section">
                                <h4>变量信息</h4>
                                <table class="detail-table">
                                    <tr>
                                        <td>中文名称</td>
                                        <td>${varName === 'OXYGEN_FLOW' ? '氧气流量' : 
                                              varName === 'LANCE_HEIGHT' ? '氧枪高度' : 
                                              varName === 'STEEL_WEIGHT' ? '钢水重量' : 
                                              varName === 'CARBON_CONTENT' ? '碳含量' : 
                                              varName === 'TEMPERATURE' ? '温度' : '未知'}</td>
                                    </tr>
                                    <tr>
                                        <td>数据类型</td>
                                        <td>Float</td>
                                    </tr>
                                    <tr>
                                        <td>单位</td>
                                        <td>${varName === 'OXYGEN_FLOW' ? 'Nm³/min' : 
                                              varName === 'LANCE_HEIGHT' ? 'mm' : 
                                              varName === 'STEEL_WEIGHT' ? 't' : 
                                              varName === 'CARBON_CONTENT' ? '%' : 
                                              varName === 'TEMPERATURE' ? '℃' : '-'}</td>
                                    </tr>
                                    <tr>
                                        <td>数值范围</td>
                                        <td>${varName === 'OXYGEN_FLOW' ? '300-1200' : 
                                              varName === 'LANCE_HEIGHT' ? '1000-2500' : 
                                              varName === 'STEEL_WEIGHT' ? '80-150' : 
                                              varName === 'CARBON_CONTENT' ? '0.01-0.8' : 
                                              varName === 'TEMPERATURE' ? '1550-1680' : '-'}</td>
                                    </tr>
                                    <tr>
                                        <td>重要性</td>
                                        <td>${importanceValue}</td>
                                    </tr>
                                </table>
                            </div>
                            
                            <div class="detail-section">
                                <h4>统计特性</h4>
                                <div class="stats-grid">
                                    <div class="stat-box">
                                        <div class="stat-value">${varName === 'OXYGEN_FLOW' ? '750.4' : 
                                                                   varName === 'LANCE_HEIGHT' ? '1850.2' : 
                                                                   varName === 'STEEL_WEIGHT' ? '120.5' : 
                                                                   varName === 'CARBON_CONTENT' ? '0.27' : 
                                                                   varName === 'TEMPERATURE' ? '1610.8' : '-'}</div>
                                        <div class="stat-label">平均值</div>
                                    </div>
                                    <div class="stat-box">
                                        <div class="stat-value">${varName === 'OXYGEN_FLOW' ? '105.2' : 
                                                                   varName === 'LANCE_HEIGHT' ? '254.7' : 
                                                                   varName === 'STEEL_WEIGHT' ? '15.8' : 
                                                                   varName === 'CARBON_CONTENT' ? '0.15' : 
                                                                   varName === 'TEMPERATURE' ? '28.4' : '-'}</div>
                                        <div class="stat-label">标准差</div>
                                    </div>
                                    <div class="stat-box">
                                        <div class="stat-value">${varName === 'OXYGEN_FLOW' ? '320.5' : 
                                                                   varName === 'LANCE_HEIGHT' ? '1150.0' : 
                                                                   varName === 'STEEL_WEIGHT' ? '82.3' : 
                                                                   varName === 'CARBON_CONTENT' ? '0.012' : 
                                                                   varName === 'TEMPERATURE' ? '1553.4' : '-'}</div>
                                        <div class="stat-label">最小值</div>
                                    </div>
                                    <div class="stat-box">
                                        <div class="stat-value">${varName === 'OXYGEN_FLOW' ? '1150.8' : 
                                                                   varName === 'LANCE_HEIGHT' ? '2480.5' : 
                                                                   varName === 'STEEL_WEIGHT' ? '148.7' : 
                                                                   varName === 'CARBON_CONTENT' ? '0.75' : 
                                                                   varName === 'TEMPERATURE' ? '1675.2' : '-'}</div>
                                        <div class="stat-label">最大值</div>
                                    </div>
                                </div>
                                
                                <div class="distribution-chart">
                                    <img src="images/${varName.toLowerCase()}_distribution.svg" alt="${varName} 数值分布" onerror="this.src='images/placeholder_chart.svg'">
                                </div>
                            </div>
                            
                            <div class="detail-section">
                                <h4>与目标变量相关性</h4>
                                <table class="correlations-table">
                                    <tr>
                                        <th>目标变量</th>
                                        <th>皮尔逊相关系数</th>
                                        <th>互信息值</th>
                                    </tr>
                                    <tr>
                                        <td>终点温度</td>
                                        <td class="${Math.random() > 0.5 ? 'high-corr' : 'med-corr'}">${(Math.random() * 0.5 + 0.3).toFixed(3)}</td>
                                        <td>${(Math.random() * 0.5 + 0.2).toFixed(3)}</td>
                                    </tr>
                                    <tr>
                                        <td>终点碳含量</td>
                                        <td class="${Math.random() > 0.5 ? 'high-corr' : 'med-corr'}">${(Math.random() * 0.5 + 0.3).toFixed(3)}</td>
                                        <td>${(Math.random() * 0.5 + 0.2).toFixed(3)}</td>
                                    </tr>
                                </table>
                            </div>
                            
                            <div class="detail-section">
                                <h4>模型中的应用</h4>
                                <p>该变量在模型中被用作：</p>
                                <ul class="model-usage-list">
                                    <li>直接特征输入</li>
                                    <li>时序变化率计算（一阶导数）</li>
                                    <li>与其他变量的交互特征</li>
                                </ul>
                                <p>模型处理方式：</p>
                                <ul class="model-usage-list">
                                    <li>标准化处理 (Z-score)</li>
                                    <li>异常值检测与处理</li>
                                    <li>缺失值插补（时序前向填充）</li>
                                </ul>
                            </div>
                        </div>
                        <style>
                            .variable-detail-container {
                                display: flex;
                                flex-direction: column;
                                gap: 25px;
                            }
                            .detail-header {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                padding-bottom: 15px;
                                border-bottom: 1px solid #eee;
                            }
                            .detail-header h3 {
                                font-size: 20px;
                                font-weight: 600;
                                color: var(--primary-dark);
                                margin: 0;
                            }
                            .variable-type {
                                background-color: var(--primary-light);
                                color: var(--primary-dark);
                                padding: 5px 10px;
                                border-radius: 15px;
                                font-size: 12px;
                                font-weight: 500;
                            }
                            .detail-section {
                                padding: 0;
                            }
                            .detail-section h4 {
                                margin: 0 0 15px 0;
                                font-size: 16px;
                                font-weight: 500;
                                color: var(--primary-dark);
                            }
                            .detail-table {
                                width: 100%;
                                border-collapse: collapse;
                            }
                            .detail-table td {
                                padding: 10px;
                                border-bottom: 1px solid #eee;
                            }
                            .detail-table td:first-child {
                                width: 30%;
                                color: #666;
                            }
                            .detail-table td:last-child {
                                font-weight: 500;
                            }
                            .stats-grid {
                                display: grid;
                                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
                                gap: 15px;
                                margin-bottom: 20px;
                            }
                            .stat-box {
                                background-color: #f8f9fa;
                                padding: 15px;
                                border-radius: 8px;
                                text-align: center;
                            }
                            .stat-value {
                                font-size: 18px;
                                font-weight: 600;
                                color: var(--primary);
                                margin-bottom: 5px;
                            }
                            .stat-label {
                                font-size: 12px;
                                color: #666;
                            }
                            .distribution-chart {
                                background-color: #f8f9fa;
                                padding: 15px;
                                border-radius: 8px;
                                text-align: center;
                                height: 200px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                            }
                            .distribution-chart img {
                                max-width: 100%;
                                max-height: 100%;
                            }
                            .correlations-table {
                                width: 100%;
                                border-collapse: collapse;
                            }
                            .correlations-table th, .correlations-table td {
                                padding: 10px;
                                text-align: left;
                                border-bottom: 1px solid #eee;
                            }
                            .correlations-table th {
                                background-color: #f8f9fa;
                                font-weight: 500;
                            }
                            .high-corr {
                                color: #e53935;
                                font-weight: 600;
                            }
                            .med-corr {
                                color: #fb8c00;
                                font-weight: 600;
                            }
                            .low-corr {
                                color: #43a047;
                                font-weight: 600;
                            }
                            .model-usage-list {
                                margin: 10px 0;
                                padding-left: 20px;
                            }
                            .model-usage-list li {
                                margin-bottom: 8px;
                            }
                        </style>
                    `, 'large');
                });
            });
            
            // 查看预测流程按钮
            const viewProcessBtn = document.querySelector('.view-process-btn');
            
            if (viewProcessBtn) {
                viewProcessBtn.addEventListener('click', function() {
                    showDetailDialog('预测流程详解', `
                        <div class="prediction-flow">
                            <div class="flow-header">
                                <h3>预测模型工作流程</h3>
                                <p>本系统采用深度学习和传统机器学习相结合的混合模型架构，实现高精度预测。</p>
                            </div>
                            
                            <div class="flow-steps">
                                <div class="flow-step">
                                    <div class="step-number">1</div>
                                    <div class="step-content">
                                        <h4>数据收集与预处理</h4>
                                        <p>从转炉控制系统实时采集工艺参数，包括：</p>
                                        <ul>
                                            <li>氧气流量、氧枪高度等吹炼参数</li>
                                            <li>废钢添加量、溶剂添加量等配料参数</li>
                                            <li>温度、成分等测量参数</li>
                                        </ul>
                                        <p>数据预处理步骤：</p>
                                        <ul>
                                            <li>缺失值处理（前向填充、插值）</li>
                                            <li>异常值识别与过滤（基于IQR和业务规则）</li>
                                            <li>数据标准化（Z-score标准化）</li>
                                        </ul>
                                    </div>
                                </div>
                                
                                <div class="flow-step">
                                    <div class="step-number">2</div>
                                    <div class="step-content">
                                        <h4>特征工程</h4>
                                        <p>从原始数据构建高级特征：</p>
                                        <ul>
                                            <li>时序特征（变化率、积分量、统计指标）</li>
                                            <li>工艺特征（碱度、比氧量等冶金计算）</li>
                                            <li>交互特征（重要参数组合）</li>
                                        </ul>
                                        <p>特征选择方法：</p>
                                        <ul>
                                            <li>基于重要性的筛选（SHAP值分析）</li>
                                            <li>共线性检测与处理</li>
                                            <li>专家知识辅助验证</li>
                                        </ul>
                                    </div>
                                </div>
                                
                                <div class="flow-step">
                                    <div class="step-number">3</div>
                                    <div class="step-content">
                                        <h4>模型预测</h4>
                                        <p>采用两阶段混合模型架构：</p>
                                        <ul>
                                            <li>时序特征提取：LSTM神经网络</li>
                                            <li>静态特征处理：XGBoost模型</li>
                                            <li>集成预测：Meta-Learner整合</li>
                                        </ul>
                                        <p>预测输出：</p>
                                        <ul>
                                            <li>终点温度（℃）</li>
                                            <li>终点碳含量（%）</li>
                                            <li>预测置信度（%）</li>
                                        </ul>
                                    </div>
                                </div>
                                
                                <div class="flow-step">
                                    <div class="step-number">4</div>
                                    <div class="step-content">
                                        <h4>结果评估与解释</h4>
                                        <p>模型结果评估指标：</p>
                                        <ul>
                                            <li>温度预测：MAE &lt; ±8℃</li>
                                            <li>碳含量预测：MAE &lt; ±0.008%</li>
                                            <li>预测准确率：&gt; 90%（工业标准范围内）</li>
                                        </ul>
                                        <p>可解释性分析：</p>
                                        <ul>
                                            <li>SHAP值分析关键影响因素</li>
                                            <li>特征重要性可视化</li>
                                            <li>冶金理论验证</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="flow-diagram">
                                <img src="images/prediction_flow.svg" alt="预测流程图" onerror="this.src='images/placeholder_diagram.svg'">
                            </div>
                        </div>
                        <style>
                            .prediction-flow {
                                display: flex;
                                flex-direction: column;
                                gap: 25px;
                            }
                            .flow-header {
                                text-align: center;
                                margin-bottom: 10px;
                            }
                            .flow-header h3 {
                                font-size: 20px;
                                font-weight: 600;
                                color: var(--primary-dark);
                                margin-bottom: 10px;
                            }
                            .flow-header p {
                                color: #666;
                                max-width: 600px;
                                margin: 0 auto;
                            }
                            .flow-steps {
                                display: flex;
                                flex-direction: column;
                                gap: 20px;
                            }
                            .flow-step {
                                display: flex;
                                gap: 15px;
                                padding-bottom: 20px;
                                border-bottom: 1px dashed #ddd;
                            }
                            .step-number {
                                background-color: var(--primary);
                                color: white;
                                width: 30px;
                                height: 30px;
                                border-radius: 50%;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                font-weight: 600;
                                flex-shrink: 0;
                            }
                            .step-content {
                                flex: 1;
                            }
                            .step-content h4 {
                                margin: 0 0 10px 0;
                                font-size: 18px;
                                font-weight: 500;
                                color: var(--primary-dark);
                            }
                            .step-content p {
                                margin: 0 0 10px 0;
                                color: #444;
                            }
                            .step-content ul {
                                margin: 0 0 15px 0;
                                padding-left: 20px;
                            }
                            .step-content li {
                                margin-bottom: 5px;
                                color: #555;
                            }
                            .flow-diagram {
                                text-align: center;
                                margin-top: 10px;
                                padding: 15px;
                                background-color: #f8f9fa;
                                border-radius: 8px;
                            }
                            .flow-diagram img {
                                max-width: 100%;
                                max-height: 300px;
                            }
                        </style>
                    `, 'large');
                });
            }
            
            // 指标卡片点击事件
            const metricCards = document.querySelectorAll('.metric-card');
            
            metricCards.forEach(card => {
                card.addEventListener('click', function() {
                    const metricTitle = this.querySelector('.metric-title').textContent;
                    const metricValue = this.querySelector('.metric-value').textContent;
                    
                    showDetailDialog(`${metricTitle} 详情`, `
                        <div class="metric-detail">
                            <div class="metric-overview">
                                <div class="metric-highlight">
                                    <div class="metric-main-value">${metricValue}</div>
                                    <div class="metric-name">${metricTitle}</div>
                                </div>
                                <div class="metric-description">
                                    <p>${getMetricDescription(metricTitle)}</p>
                                </div>
                            </div>
                            
                            <div class="metric-history">
                                <h4>历史趋势</h4>
                                <div class="metric-chart">
                                    <img src="images/${metricTitle.toLowerCase().replace(/\s+/g, '_')}_trend.svg" alt="${metricTitle} 趋势" onerror="this.src='images/placeholder_trend.svg'">
                                </div>
                            </div>
                            
                            <div class="metric-comparison">
                                <h4>与行业标准对比</h4>
                                <table class="comparison-table">
                                    <tr>
                                        <th>对比对象</th>
                                        <th>值</th>
                                        <th>差异</th>
                                    </tr>
                                    <tr>
                                        <td>行业平均水平</td>
                                        <td>${getIndustryAvg(metricTitle)}</td>
                                        <td class="better">+${getPerformanceDiff(metricTitle, 'avg')}%</td>
                                    </tr>
                                    <tr>
                                        <td>行业最佳水平</td>
                                        <td>${getIndustryBest(metricTitle)}</td>
                                        <td class="worse">-${getPerformanceDiff(metricTitle, 'best')}%</td>
                                    </tr>
                                    <tr>
                                        <td>上一版本模型</td>
                                        <td>${getPrevVersion(metricTitle)}</td>
                                        <td class="better">+${getPerformanceDiff(metricTitle, 'prev')}%</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <style>
                            .metric-detail {
                                display: flex;
                                flex-direction: column;
                                gap: 25px;
                            }
                            .metric-overview {
                                display: flex;
                                gap: 20px;
                                align-items: center;
                                padding-bottom: 15px;
                                border-bottom: 1px solid #eee;
                            }
                            .metric-highlight {
                                background-color: var(--primary-light);
                                padding: 20px;
                                border-radius: 8px;
                                text-align: center;
                                min-width: 150px;
                            }
                            .metric-main-value {
                                font-size: 32px;
                                font-weight: 700;
                                color: var(--primary);
                                margin-bottom: 5px;
                            }
                            .metric-name {
                                color: var(--primary-dark);
                                font-weight: 500;
                            }
                            .metric-description {
                                flex: 1;
                            }
                            .metric-description p {
                                margin: 0;
                                line-height: 1.6;
                                color: #555;
                            }
                            .metric-history h4, .metric-comparison h4 {
                                margin: 0 0 15px 0;
                                font-size: 16px;
                                font-weight: 500;
                                color: var(--primary-dark);
                            }
                            .metric-chart {
                                background-color: #f8f9fa;
                                padding: 15px;
                                border-radius: 8px;
                                text-align: center;
                                height: 200px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                            }
                            .metric-chart img {
                                max-width: 100%;
                                max-height: 100%;
                            }
                            .comparison-table {
                                width: 100%;
                                border-collapse: collapse;
                            }
                            .comparison-table th, .comparison-table td {
                                padding: 10px;
                                text-align: left;
                                border-bottom: 1px solid #eee;
                            }
                            .comparison-table th {
                                background-color: #f8f9fa;
                                font-weight: 500;
                            }
                            .better {
                                color: #43a047;
                                font-weight: 600;
                            }
                            .worse {
                                color: #e53935;
                                font-weight: 600;
                            }
                        </style>
                    `, 'large');
                });
            });
            
            // 辅助函数：获取指标描述
            function getMetricDescription(metric) {
                const descriptions = {
                    '温度预测精度': '衡量模型预测转炉终点温度的准确程度，以平均绝对误差(MAE)表示。当前模型在生产环境中的温度预测精度达到±8.5℃，满足工艺要求(±10℃)，可有效指导终点加料和调整操作。',
                    '碳含量预测精度': '衡量模型预测钢水碳含量的准确程度，以平均绝对误差(MAE)表示。当前模型预测精度为±0.0072%，优于行业标准(±0.01%)，能有效减少返烧率和过烧率。',
                    '预测成功率': '模型预测结果在工艺允许范围内的比例。当前模型在实际生产中的预测成功率为91.3%，相比传统模型提高了约15个百分点，显著减少了人工干预次数。',
                    '模型响应时间': '从数据输入到获得预测结果的时间间隔。当前模型平均响应时间为0.8秒，满足实时控制需求，可在吹炼过程中及时提供预测结果和调整建议。'
                };
                
                return descriptions[metric] || '该指标用于评估模型在实际生产环境中的表现，是衡量模型质量的重要标准。';
            }
            
            // 辅助函数：获取行业平均水平
            function getIndustryAvg(metric) {
                const values = {
                    '温度预测精度': '±12.5℃',
                    '碳含量预测精度': '±0.012%',
                    '预测成功率': '78.5%',
                    '模型响应时间': '1.6秒'
                };
                
                return values[metric] || '-';
            }
            
            // 辅助函数：获取行业最佳水平
            function getIndustryBest(metric) {
                const values = {
                    '温度预测精度': '±7.2℃',
                    '碳含量预测精度': '±0.006%',
                    '预测成功率': '94.2%',
                    '模型响应时间': '0.5秒'
                };
                
                return values[metric] || '-';
            }
            
            // 辅助函数：获取上一版本指标
            function getPrevVersion(metric) {
                const values = {
                    '温度预测精度': '±10.3℃',
                    '碳含量预测精度': '±0.009%',
                    '预测成功率': '85.7%',
                    '模型响应时间': '1.2秒'
                };
                
                return values[metric] || '-';
            }
            
            // 辅助函数：获取性能差异
            function getPerformanceDiff(metric, type) {
                // 随机生成差异百分比
                const rand = Math.random() * 15 + 5;
                return rand.toFixed(1);
            }
        });
        
        // 初始化下拉菜单
        function initDropdowns() {
            const dropdownTriggers = document.querySelectorAll('.dropdown-trigger');
            
            dropdownTriggers.forEach(trigger => {
                trigger.addEventListener('click', function() {
                    const dropdown = this.closest('.dropdown');
                    dropdown.classList.toggle('open');
                    
                    // 点击外部关闭下拉菜单
                    document.addEventListener('click', function closeDropdown(e) {
                        if (!dropdown.contains(e.target)) {
                            dropdown.classList.remove('open');
                            document.removeEventListener('click', closeDropdown);
                        }
                    });
                });
            });
            
            // 为下拉菜单项添加点击事件
            const dropdownItems = document.querySelectorAll('.dropdown-item');
            dropdownItems.forEach(item => {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    const text = this.querySelector('span').textContent;
                    
                    if (text === '退出登录') {
                        if (confirm('确定要退出登录吗？')) {
                            window.location.href = 'login.html';
                        }
                    } else {
                        showMessage(`您点击了${text}`, 'info');
                    }
                    
                    // 关闭下拉菜单
                    this.closest('.dropdown').classList.remove('open');
                });
            });
        }
    </script>
</body>
</html> 